<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorate="admin/fragments/layout"
	th:with="title='角色管理',active='role'">

<section layout:fragment="header">
	<h1>角色管理</h1>
</section>

<section layout:fragment="content">

	<div class="box box-primary">
		<div class="box-header">
			<a class="btn btn-sm btn-success" href="/admin/role/add">新增</a>
		</div>
		<div class="box-body">
			<table id="roleTab" class="table table-bordered table-striped">
				<thead>
					<tr>
						<th>编号</th>
						<th>角色名称</th>
						<th>角色key</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr th:each="role : ${list}">
						<td th:text="${role.id}"></td>
						<td th:text="${role.roleName}"></td>
						<td th:text="${role.roleKey}"></td>
						<td><a class="btn btn-sm btn-success"
							th:href="@{'/admin/role/edit/'+${role.id}}">修改</a> <a
							class="btn btn-sm btn-warning"
							th:href="@{'/admin/role/grant/'+${role.id}}">分配资源</a>
							<button class="btn btn-sm btn-danger"
								th:onclick="'del('
									+ ${role.id}
									+ ')'">删除</button></td>
					</tr>
				</tbody>
			</table>
		</div>

	</div>
</section>

<script layout:fragment="script">
	function del(id) {
		layer.confirm('确定删除吗?', {
			icon : 3,
			title : '提示'
		}, function(index) {
			$.ajax({
				type : "POST",
				dataType : "json",
				url : "/admin/role/delete/" + id,
				success : function(res) {
					layer.msg(res.message, {
						time : 2000
					}, function() {
						location.reload();
					});
				}
			});
		});
	}

	$(document).ready(function() {
		//debugger;
		var tab = $('#roleTab').DataTable({
			language : {
				url : '/assets/plugins/datatables.net/Chinese.json'
			},
			processing : true,
			serverSide : false,
			order : [ [ 0, "asc" ] ],
			columnDefs : [ {
				"orderable" : false,
				"targets" : -1
			}, {
				"searchable" : false,
				"targets" : -1
			} ]
		});
	});
</script>
</html>